<template>
  <div>name:{{name}}</div>
  <div>age:{{age}}</div>
  <button @click="updatePerson">change</button>
</template>

<script>
import { toRefs, reactive } from "vue";
export default {
  name: "App",
  setup() {
    const person = reactive({
      name: "harry",
      age: 28
    });

    const newp = toRefs(person); // 需要在return中解构一下newp
    console.log(newp); // {name: ObjectRefImpl, age: ObjectRefImpl}

    function updatePerson() {
      newp.name.value += "!";
      person.age += 1;
      // person和new的数据相通，所以修改谁的都可以
      // 但是注意使用ref相关的函数后，都要通过value属性读写值
      // 使用reactive可以直接读写
    }
    return {
      ...newp,
      updatePerson
    };
  }
};
</script>

<style>
</style>